<template>
	<view class="page_wrapper">
		<view class="user_header_block">
			<view class="user_left_block">
				<view class="avatar_block">
					<button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
						<template v-if="userInfo.avatarUrl">
							<image class="avatar" :src="userInfo.avatarUrl"></image>
						</template>
						<template v-else>
							<view class="upload_avatar">点击上传头像</view>
						</template>
					</button>
				</view>
			</view>
			<view class="user_right_block">
				<view class="nick_name">
					<input type="nickname" class="name-input" name="nickname" :value="userInfo.name" 
					bindchange="onInput" placeholder="请设置昵称"  />
				</view>
				<view class="id_no">ID : {{userInfo.idNo}}</view>
			</view>
		</view>
		<view class="menus_block">
			<view class="menu top_line" @click="showMyFczCoins()">
				<view class="menu_title">我的学习币</view>
				<view class="icon_block">
					<image class="right_icon" src="@/static/images/right_arrow.png"></image>
				</view>
			</view>
			<view class="menu" @click="mathExamLogs()">
				<view class="menu_title">口算试题记录</view>
				<view class="icon_block">
					<image class="right_icon" src="@/static/images/right_arrow.png"></image>
				</view>
			</view>
			<view class="menu" @click="dataStat()">
				<view class="menu_title">数据统计</view>
				<view class="icon_block">
					<image class="right_icon" src="@/static/images/right_arrow.png"></image>
				</view>
			</view>
			<view class="menu" @click="devFuncList()">
				<view class="menu_title">待开发功能列表</view>
				<view class="icon_block">
					<image class="right_icon" src="@/static/images/right_arrow.png"></image>
				</view>
			</view>
			<view class="menu" style="display: none;">开通会员</view>
			<view class="menu" style="display: none;">分享有礼</view>
			<view class="menu" style="display: none;">兑换记录</view>
		</view>
		
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	import {storageData} from '@/utils/storageData.js'
	export default {
		data() {
			return {
				userInfo: {
					name: '',
					avatarUrl: ''
				}
			}
		},
		
		onLoad() {
			this.userInfo = storageData.getLoginUser()
			console.log(this.userInfo)
		},
		onInput(e) {
			const { value } = e.detail
			console.log('输入昵称', value);
			if(value.length === 0){
				uni.showToast({
					icon: 'none',
					title: '昵称不能为空'
				})
				return false
			}
			this.userInfo.name = value
			uni.showLoading()
			request.putJson( 
				'/users/myInfo', this.userInfo
			).then(res => {
				uni.hideLoading()
				storageData.saveLoginUser(this.userInfo)
				console.log(res)
				uni.showToast({ icon: 'none', title: '修改成功' })
			}).catch(err => {
				uni.hideLoading()
				console.log(err)
				uni.showToast({ icon: 'none', title: '修改失败' })
			})
		},
		// 选择头像
		onChooseAvatar(e) {
			console.log('选择头像', e);
			const { avatarUrl } = e.detail
			console.log(avatarUrl)
			const $this = this
			request.uploadAvatar(avatarUrl)
				.then(res => {
					// 保存数据
					uni.showLoading()
					$this.userInfo.avatarUrl = res
					request.putJson( 
						'/users/myInfo', $this.userInfo
					).then(res => {
						uni.hideLoading()
						storageData.saveLoginUser($this.userInfo)
						uni.showToast({ icon: 'none', title: '修改成功' })
					}).catch(err => {
						uni.hideLoading()
						console.log(err)
						uni.showToast({ icon: 'none', title: '修改失败' })
					})
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
					uni.showToast({ icon: 'none', title: '保存头像信息失败' })
				})
			
		},
		methods: {
			changeName() {
				console.log('change name ')
			},
			
			showMyFczCoins() {
				uni.navigateTo({
					url: '/pages/MyFczCoin/MyFczCoin'
				})
			},
			
			mathExamLogs() {
				uni.navigateTo({
					url: '/pages/mathExamLogs/mathExamLogs'
				})
			},
			
			dataStat() {
				uni.navigateTo({
					url: '/pages/userCenter/dataStat/dataStat'
				})
				// uni.showModal({
				// 	content: '该功能正在开发中，敬请期待',
				// 	showCancel: false
				// })
			},
			
			devFuncList() {
				uni.navigateTo({
					url: '/pages/devFuncList/devFuncList'
				})
			}
		},
		onShareAppMessage(res) {
			const userInfo = storageData.getLoginUser()
			if (res.from === 'button') {
					 // 来自页面内分享按钮
					 console.log(res.target);
			}
			return {
				title: '萌芽学口算：学习好帮手',
				path: '/pages/index/index?shareUc=' + userInfo.userCode,
				mpId: 'wxe9f0922a16331d4b', //此处配置微信小程序的AppId
				imageUrl: 'https://fcz.oss-cn-beijing.aliyuncs.com/images/myxb.png'
			}
		},
		onShareTimeline(res) {
			const userInfo = storageData.getLoginUser()
			return {
				title: '萌芽学口算：学习好帮手',
				path: '/pages/index/index?shareUc=' + userInfo.userCode,
				mpId: 'wxe9f0922a16331d4b', //此处配置微信小程序的AppId
				imageUrl: 'https://fcz.oss-cn-beijing.aliyuncs.com/images/myxb.png'
			}
		},
		// 收藏
		onAddToFavorites(res) {
			return {
				title: '萌芽学口算：学习好帮手',
				path: '/pages/index/index',
				mpId: 'wxe9f0922a16331d4b', //此处配置微信小程序的AppId
				imageUrl: 'https://fcz.oss-cn-beijing.aliyuncs.com/images/myxb.png'
			}
		}
	}
</script>

<style lang="scss">
	.page_wrapper{
		width: 100%;
		height: 100%;
		background-color: #EBEEF5;
		display: flex;
		flex-direction: column;
		.user_header_block{
			height: 120px;
			background-color: white;
			display: flex;
			.user_left_block{
				display: flex;
				justify-content: center;
				align-items: center;
				padding-left: 10px;
				.avatar_block{
					background-color: white;
					display: flex;
					justify-content: center;
					align-items: center;
					.avatar-wrapper{
						height: 80px;
						background-color: white;
						border: none;
						outline: none;
						.avatar{
							width: 80px;
							height: 80px;
							border-radius: 50px;
						}
						.upload_avatar{
							color: #666666;
							font-size: 12px;
							width: 80px;
							height: 80px;
							border-radius: 50px;
							background-color: #c2c2c2;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
					.avatar-wrapper::after{
						border: none;
					}
				}
			}
			.user_right_block{
				color: #333333;
				padding-left: 10px;
				font-size: 17px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.nick_name{
					font-size: 17px;
					font-weight: 500;
					margin-bottom: 10px;
					display: flex;
					align-items: center;
					.name-input{
						width: 180px;
						height: 30px;
						background-image: url('@/static/images/editor.png');
						background-repeat: no-repeat;
						background-position: 155px 3px;
						background-size: 20px 20px;
					}
					.editor_name_btn{
						width: 22px;
						height: 22px;
						margin-left: 15px;
					}
				}
				.id_no{
					font-size: 14px;
					color: #555555;
				}
			}
		}
		.menus_block{
			margin-top: 20px;
			display: flex;
			flex-direction: column;
			padding: 10px 20px;
			background-color: white;
			.menu{
				height: 60px;
				border-bottom: 1px solid #e3e3e3;
				display: flex;
				align-items: center;
				.menu_title{
					flex: 1;
				}
				.icon_block{
					width: 18px;
					.right_icon{
						width: 14px;
						height: 14px;
					}
				}
			}
		}
	}
</style>
